<template>
  <div class="item-todo">
    <div class="second-todo">
      <!-- 左侧按钮 -->
      <mu-checkbox v-model="itemObj.complete" @click="changeTodo"></mu-checkbox>
      <div>
        <p>{{itemObj.title}}</p>
        <p>{{itemObj.text}}</p>
      </div>
    </div>
    <!-- 右侧按钮 -->
    <div class="third-todo">
      <mu-button fab small color="success" @click="modifyTo(itemObj.id)">
        <mu-icon value="改"></mu-icon>
      </mu-button>
      <mu-button fab small color="indigo" @click="deleteTo(itemObj.id)">
        <mu-icon  value="删"></mu-icon>
      </mu-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'itemTodo',
  props:{
    // 每一项对象
    itemObj:{
      type: Object,
      default:function(){
        return {}
      }
    }
  },
  data() {
    return {
      
    }
  },
  methods: {
    deleteTo(val){
      this.$emit("deleteTo",val)
    },
    modifyTo(val){
      this.$emit("modifyTo",val)
    },
    changeTodo(val){
      this.$emit("changeTodo",val)
    }
  },
  
}
</script>

<style lang="scss" scoped>
.item-todo{
  margin: 10px 20px;
  height: 110px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 10px 4px rgba(186, 190, 198, 0.3);

  .second-todo{
    height: 90px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    p{
      height: 38px;
      margin-left: 10px;
      &:first-child{
        font-size: 20px;
        font-weight: 600;
      }
      &:last-child{
        @include overflow-emphasis;
        width: 180px;
      }
    }
  }
  .third-todo{
    width: 100px;
    display: flex;
    justify-content: space-around;
  }
}
</style>
